<template>
  <div class="user-container">
    <div class="user-header">
      <h2>用户管理</h2>
      <button @click="getUser" class="refresh-btn">刷新用户信息</button>
    </div>

    <div class="user-card">
      <div class="user-info">
        <div class="info-row">
          <span class="label">用户ID:</span>
          <span class="value">{{ user.id }}</span>
        </div>
        <div class="info-row">
          <span class="label">用户名:</span>
          <span class="value">{{ user.username }}</span>
        </div>
        <div class="info-row">
          <span class="label">手机号:</span>
          <span class="value">{{ user.phone }}</span>
        </div>
        <div class="info-row">
          <span class="label">注册时间:</span>
          <span class="value">{{ formatDate(user.createTime) }}</span>
        </div>
        <div class="info-row">
          <span class="label">账户余额:</span>
          <span class="value">{{ user.money.toFixed(2) }} 元</span>
        </div>
        <div class="info-row">
          <span class="label">性别:</span>
          <span class="value">{{ user.sex === 1 ? '男' : user.sex === 2 ? '女' : '未知' }}</span>
        </div>
      </div>

      <div class="user-actions">
        <button @click="editUser" class="edit-btn">编辑用户</button>
        <button @click="deleteUser" class="delete-btn">删除用户</button>
      </div>
    </div>

    <!-- 编辑用户表单 -->
    <div v-if="isEditing" class="edit-form">
      <h3>编辑用户信息</h3>
      <div class="form-group">
        <label>用户名:</label>
        <input type="text" v-model="editUserForm.username">
      </div>
      <div class="form-group">
        <label>手机号:</label>
        <input type="text" v-model="editUserForm.phone">
      </div>
      <div class="form-group">
        <label>性别:</label>
        <select v-model="editUserForm.sex">
          <option value="0">未知</option>
          <option value="1">男</option>
          <option value="2">女</option>
        </select>
      </div>
      <div class="form-actions">
        <button @click="saveUser" class="save-btn">保存</button>
        <button @click="cancelEdit" class="cancel-btn">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
import {getUser} from "@/api/user";

export default {
  name: "User",
  data: function () {
    return {
      user: {
        id: 1,
        username: '',
        password: '',
        phone: '',
        createTime: '',
        money: 0,
        sex: 0
      },
      isEditing: false,
      editUserForm: {}
    }
  },
  methods: {
    getUser() {
      getUser({ id: this.user.id }).then(res => {
        if (res.data && res.data.code === 1) {
          this.user = res.data.data
        } else {
          alert('获取用户信息失败: ' + (res.data?.msg || '未知错误'))
        }
      }).catch(err => {
        console.error('获取用户信息请求失败:', err)
        alert('获取用户信息失败，请检查网络或联系管理员')
      })
    },
    formatDate(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
    },
    editUser() {
      this.isEditing = true;
      // 复制用户信息到编辑表单
      this.editUserForm = {...this.user};
    },
    cancelEdit() {
      this.isEditing = false;
    },
    saveUser() {
      // 这里可以添加保存用户信息的API调用
      alert('保存功能待实现');
      // 保存成功后更新用户信息并退出编辑模式
      // this.user = {...this.editUserForm};
      // this.isEditing = false;
    },
    deleteUser() {
      if (confirm('确定要删除此用户吗？此操作不可撤销！')) {
        // 这里可以添加删除用户的API调用
        alert('删除功能待实现');
      }
    }
  },
  mounted() {
    // 组件挂载时自动获取用户信息
    this.getUser();
  }
}
</script>

<style scoped>
.user-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
}

.user-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.refresh-btn {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.user-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.user-info {
  margin-bottom: 20px;
}

.info-row {
  display: flex;
  margin-bottom: 12px;
}

.label {
  width: 120px;
  font-weight: bold;
  color: #666;
}

.value {
  flex: 1;
  color: #333;
}

.user-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.edit-btn, .save-btn {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.delete-btn, .cancel-btn {
  padding: 8px 16px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.edit-form {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: inline-block;
  width: 100px;
}

.form-group input, .form-group select {
  padding: 8px;
  width: 250px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
</style>